<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.grid{
				width: 500px;
				height: 400px;
				background-color: skyblue;
				padding: 10px;
				margin: 20px auto;
				display: grid;
				grid-template-columns: repeat(1,1fr);
				grid-template-rows: repeat(1,1fr);
				color: #fff;
				gap: 20px;
			}
			.item {
				margin: 0 auto;
				padding: 10px;
				width: 320px;
				height: 100px;
				background-color: greenyellow;
				top: 2px;
			}
			.item .iconfont{
				font-size: 60px;
				text-align: center;	
			}
			.left{
				float: left;
				text-align: center;
				line-height: 60px;
				padding: 20px;
			}
			.right{
				left: 20px;
			}
			.right span:first-child{
				font-size: 16px;
				color: black;
				padding: 0;
			}
			.right span:nth-child(2){
				font-size: 10px;
				color: #333;
			}
		</style>
		<link rel="stylesheet" href="fonts/iconfont.css">
	</head>
	<body>
		<div class="grid">
			<div class="item">
				<div class="left">
					<span class="iconfont icon-chongzhi"></span>
				</div>
				<div class="right">
					<span>微信发票助手</span><br>
					<span>发票添加至卡包，集中管理更高效</span>
				</div>
			</div>
			<div class="item">
				<div class="left">
					<span class="iconfont icon-shenghuojiaofei"></span>
				</div>
				<div class="right">
					<span>腾讯文档</span><br>
					<span>存云端防国企，PDF可编辑/批注</span>
				</div>
			</div>
			<div class="item">
				<div class="left">
					<span class="iconfont icon-Qbichongzhi"></span>
				</div>
				<div class="right">
					<span>腾讯元宝</span><br>
					<span>AI总结、文章回答、快人一步</span>
				</div>
			</div>
		</div>
	</body>
</html>